<template>
  <div class="orgInfo">
    <div class="top">
      <div class="title">劲松党支部</div>
      <div class="topinfo">
        <div class="post">书记</div>
        <div>{{ hdxx.sj }}</div>
        <div class="post">副书记</div>
        <div>{{ hdxx.fsj }}</div>
        <div class="post">组织委员</div>
        <div>{{ hdxx.zzwy }}</div>
        <div class="post">宣传委员</div>
        <div>{{ hdxx.xcwy }}</div>
        <div class="post">纪检委员</div>
        <div>{{ hdxx.jjwy }}</div>
      </div>
    </div>
    <div class="content">
      <div class="title item">支部通讯录</div>
      <div class="state_item" v-for="(item, index) in list" :key="index" v-show="item.zz">
        <div>{{item.zz}}</div>
        <div v-for="(val, index) in item.list" :key="index" class="state_item_d">
          <span>{{val.username}}</span>
          <span>{{val.tel}}</span>
          <span><a :href="'tel:' + val.tel"><van-icon name="phone-o" /></a></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {ldxzxxQuerydata4object1, ldxzxxQuerytxllist} from '../assets/js/api';
export default {
  data() {
    return {
      loading: false,
      finished: false,
      list: [],
      hdxx: {
        sj: '',
        fsj: '',
        zzwy: '',
        xcwy: '',
        jjwy: ''
      },
      dspToken: localStorage.dspToken
    };
  },
  mounted() {
    ldxzxxQuerydata4object1({
      dspToken: this.dspToken
    }).then(res => {
      if (res.code.status === '1') {
        this.hdxx.sj = res.data[0].sj; //  书记
        this.hdxx.fsj = res.data[0].fsj; //  副书记
        this.hdxx.zzwy = res.data[0].zzwy; //  组织委员
        this.hdxx.xcwy = res.data[0].xcwy; //  宣传委员
        this.hdxx.jjwy = res.data[0].jjwy; //  纪检委员
      } else {
        this.$toast('获取数据失败');
      }
    });
    ldxzxxQuerytxllist({
      dspToken: this.dspToken
    }).then(res => {
      this.list = res.data;
      // res.data.map(item => {
      //   if (!list[item[2]]) {
      //     list[item[2]] = [];
      //   }
      //   list[item[2]].push(item);
      // });
      // _this.$set(_this.state, 'list', list)
    });
  },
  methods: {}
};
</script>

<style lang="less" scoped>
.orgInfo {
  padding: 24px;
  .top {
    width: 704px;
    height: 422px;
    background-color: #ffffff;
    box-shadow: 3px 4px 9px 1px rgba(1, 88, 155, 0.05);
    border-radius: 8px;
    margin: 0 auto;
    .title {
      height: 64px;
      background-color: #3198ed;
      color: #ffffff;
      font-size: 30px;
      line-height: 64px;
      padding: 0 16px;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
    }
    .topinfo {
      margin-top: 34px;
      display: grid;
      grid-template-columns: 190px 1fr;
      grid-gap: 14px;
      font-size: 34px;
      color: #343434;
      .post {
        color: #888888;
        text-align: right;
        margin-right: 10px;
      }
    }
  }
  .content {
    width: 704px;
    margin: 0 auto;
    margin-top: 26px;
    box-shadow: 3px 4px 9px 1px rgba(1, 88, 155, 0.05);
    border-radius: 8px;
    .state_item {
      font-size: 30px;
      div:nth-child(1) {
        padding: 0 15px;
        color: #999;
      }
      .state_item_d {
        display: flex;
        align-items: center;
        background-color: #fff;
        padding: 20px;
        padding-left: 40px;
        span:nth-child(1) {
          width: 20%;
          font-weight: 500;
        }
        span:nth-child(2) {
          color: #999;
          width: 60%;
        }
        span:nth-child(3) {
          width: 20%;
          text-align: right;
          padding-right: 20px;
          i {
            float: right;
            background-color: #3199ec;
            border-radius: 50px;
            padding: 14px;
            color: #fff;
            font-size: 40px;
          }
        }
      }
    }
    .title {
      font-size: 30px;
      font-weight: bold;
      color: #343434;
      height: 61px;
      line-height: 61px;
      display: flex;
      background-color: #ffffff;
      &::before {
        content: "";
        width: 4px;
        height: 22px;
        background: #3198ed;
        margin-right: 10px;
        margin-left: 25px;
        align-self: center;
      }
    }
  }
}
</style>
